Frontend WebHID-enhetsfilter: Valg av Human Interface Devices forklart

WebHID API-et åpner en verden av muligheter for webapplikasjoner, og lar dem samhandle direkte med Human Interface Devices (HID) som spillkontrollere, spesialiserte inndataenheter og mer. En kritisk del av å bruke WebHID effektivt er å forstå enhetsfiltre. Denne omfattende guiden vil lede deg gjennom detaljene i WebHID-enhetsfiltre, og gi deg verktøyene til å skape kraftige og engasjerende webopplevelser.

Hva er WebHID?

WebHID er et web-API som gjør det mulig for webapplikasjoner å kommunisere med HID-enheter koblet til en brukers datamaskin eller mobile enhet. I motsetning til tradisjonelle web-API-er som er avhengige av spesifikke enhetsdrivere, gir WebHID et generisk grensesnitt for samhandling med et bredt spekter av enheter, så lenge brukeren gir tillatelse. Dette gjør det ideelt for enheter som ikke har innebygd nettleserstøtte eller krever tilpasset håndtering av inndata.

Hvorfor bruke WebHID?

• Direkte enhetstilgang: Kommuniser direkte med HID-enheter uten å være avhengig av nettleserspesifikke drivere.
• Tilpasset inndatahåndtering: Implementer tilpasset mapping og behandling av inndata for spesialiserte enheter.
• Bred enhetsstøtte: Støtt et bredere spekter av enheter, inkludert spillkontrollere, vitenskapelige instrumenter og industrielle kontrollere.
• Forbedret brukeropplevelse: Skap mer oppslukende og interaktive webopplevelser.

Forstå WebHID-enhetsfiltre

Enhetsfiltre er avgjørende for å be om tilgang til spesifikke HID-enheter. Når webapplikasjonen din kaller navigator.hid.requestDevice(), viser nettleseren en enhetsvelger som lar brukeren velge en enhet. Enhetsfiltre lar deg begrense listen over enheter som presenteres for brukeren, noe som gjør det enklere for dem å finne den riktige.

Et enhetsfilter er et JavaScript-objekt som spesifiserer kriterier for å matche HID-enheter. Du kan spesifisere flere filtre i requestDevice()-kallet, og nettleseren vil kun vise enheter som matcher minst ett av filtrene.

Egenskaper for enhetsfilter

• vendorId (valgfritt): USB-leverandør-ID-en til enheten. Dette er et 16-bits tall som identifiserer produsenten av enheten.
• productId (valgfritt): USB-produkt-ID-en til enheten. Dette er et 16-bits tall som identifiserer den spesifikke modellen av enheten.
• usagePage (valgfritt): HID Usage Page for enheten. Dette identifiserer kategorien til enheten (f.eks. generelle skrivebordskontroller, spillkontroller).
• usage (valgfritt): HID Usage for enheten. Dette identifiserer den spesifikke funksjonen til enheten innenfor usage page (f.eks. styrespak, spillkontroller).

Du kan bruke en kombinasjon av disse egenskapene for å lage svært spesifikke filtre. For eksempel kan du filtrere etter enheter med en spesifikk vendorId og productId for å målrette mot en bestemt modell av en spillkontroller.

Praktiske eksempler på enhetsfiltre

La oss se på noen praktiske eksempler på hvordan du kan bruke enhetsfiltre i dine webapplikasjoner.

Eksempel 1: Filtrering for en spesifikk spillkontroller

Anta at du vil målrette mot en spesifikk spillkontroller med en kjent vendorId og productId. Du kan bruke følgende filter:

            const filters = [
  {
    vendorId: 0x045e, // Microsoft
    productId: 0x028e, // Xbox 360-kontroller
  },
];

navigator.hid.requestDevice({ filters })
  .then((devices) => {
    // Håndter den/de valgte enheten(e)
  })
  .catch((error) => {
    // Håndter feil
  });

            

              
                Copy
              
            
          

I dette eksempelet vil filteret kun matche enheter med en vendorId på 0x045e (Microsoft) og en productId på 0x028e (Xbox 360-kontroller). Erstatt disse med den aktuelle leverandør-ID-en og produkt-ID-en for enheten du målretter mot.

Eksempel 2: Filtrering for en hvilken som helst spillkontroller

Hvis du vil la brukeren velge en hvilken som helst spillkontroller, kan du bruke et filter som spesifiserer usagePage og usage for spillkontrollere:

            const filters = [
  {
    usagePage: 0x01, // Generelle skrivebordskontroller
    usage: 0x05, // Spillkontroller
  },
];

navigator.hid.requestDevice({ filters })
  .then((devices) => {
    // Håndter den/de valgte enheten(e)
  })
  .catch((error) => {
    // Håndter feil
  });

            

              
                Copy
              
            
          

Dette filteret vil matche enhver HID-enhet som identifiserer seg som en spillkontroller ved hjelp av standard HID-brukskoder.

Eksempel 3: Kombinere filtre

Du kan kombinere flere filtre for å gi mer fleksibilitet. For eksempel kan det hende du vil la brukeren velge enten en spesifikk spillkontrollermodell eller en hvilken som helst spillkontroller:

            const filters = [
  {
    vendorId: 0x045e, // Microsoft
    productId: 0x028e, // Xbox 360-kontroller
  },
  {
    usagePage: 0x01, // Generelle skrivebordskontroller
    usage: 0x05, // Spillkontroller
  },
];

navigator.hid.requestDevice({ filters })
  .then((devices) => {
    // Håndter den/de valgte enheten(e)
  })
  .catch((error) => {
    // Håndter feil
  });

            

              
                Copy
              
            
          

I dette tilfellet vil enhetsvelgeren vise både den spesifikke Xbox 360-kontrolleren (hvis tilkoblet) og enhver annen enhet som identifiserer seg som en spillkontroller.

Eksempel 4: Filtrering for en spesifikk tastaturtype på et system

Noen nisjetastaturer krever spesifikke HID-koder for å initialisere riktig. Følgende eksempel antar at du kjenner leverandør-ID, produkt-ID, usage page og usage for tastaturet. Du kan vanligvis finne denne informasjonen i produsentens dokumentasjon, eller ved å bruke verktøy for enhetslisting som er tilgjengelige på de fleste operativsystemer.

            const filters = [
    {
        vendorId: 0x1234,  // Erstatt med din leverandør-ID
        productId: 0x5678, // Erstatt med din produkt-ID
        usagePage: 0x07,   // Erstatt med din usage page (f.eks. Keyboard/Keypad)
        usage: 0x01      // Erstatt med din usage (f.eks. Keyboard)
    }
];

navigator.hid.requestDevice({ filters })
  .then((devices) => {
    // Håndter den/de valgte enheten(e)
  })
  .catch((error) => {
    // Håndter feil
  });

            

              
                Copy
              
            
          

Hente enhetsinformasjon

Når brukeren har valgt en enhet, kan du få tilgang til informasjonen dens ved hjelp av HIDDevice-objektet.

Egenskaper for HIDDevice

• vendorId: USB-leverandør-ID-en til enheten.
• productId: USB-produkt-ID-en til enheten.
• productName: Navnet på enheten.
• collections: En matrise av HIDCollection-objekter som representerer HID-rapportbeskrivelsene til enheten.

Du kan bruke denne informasjonen til å identifisere enheten og konfigurere applikasjonen din deretter.

Håndtering av HID-rapporter

Etter at du har fått tak i en HIDDevice, må du åpne den og begynne å lytte etter HID-rapporter. HID-rapporter er rådataene som sendes fra enheten til applikasjonen din.

Åpne enheten

            device.open()
  .then(() => {
    console.log('Enhet åpnet');

    // Begynn å lytte etter inndatarapporter
    device.addEventListener('inputreport', (event) => {
      const { data, reportId } = event;
      // Behandle inndatarapporten
      console.log(`Mottok inndatarapport med ID ${reportId}:`, data);
    });
  })
  .catch((error) => {
    console.error('Kunne ikke åpne enheten:', error);
  });

            

              
                Copy
              
            
          

Behandle inndatarapporter

Inndatarapporter mottas som DataView-objekter. Strukturen på dataene avhenger av enhetens HID-rapportbeskrivelse. Du må konsultere enhetens dokumentasjon for å forstå hvordan du skal tolke dataene.

Her er et forenklet eksempel på hvordan du kan behandle en inndatarapport:

            device.addEventListener('inputreport', (event) => {
  const { data, reportId } = event;

  // Antar at den første byten i rapporten representerer knappestatusen
  const buttonState = data.getUint8(0);

  // Behandle knappestatusen
  if (buttonState & 0x01) {
    console.log('Knapp 1 trykket');
  }
  if (buttonState & 0x02) {
    console.log('Knapp 2 trykket');
  }
});

            

              
                Copy
              
            
          

Dette er et veldig grunnleggende eksempel. Ekte HID-enheter har ofte mer komplekse rapportstrukturer. Reversering av HID-rapporten kan være en kompleks prosess; det finnes imidlertid verktøy som hjelper med tolkningsprosessen.

Feilhåndtering

Det er viktig å håndtere feil på en elegant måte når du jobber med WebHID. Her er noen vanlige feil du kan støte på:

• SecurityError: Brukeren har nektet tillatelse til å få tilgang til HID-enheter.
• NotFoundError: Ingen matchende enheter ble funnet.
• InvalidStateError: Enheten er allerede åpen.
• Andre feil: USB-feil, uventede frakoblinger av enheter.

Pakk alltid WebHID-koden din inn i try...catch-blokker og gi informative feilmeldinger til brukeren.

Beste praksis for WebHID-utvikling

• Bruk enhetsfiltre: Bruk alltid enhetsfiltre for å begrense listen over enheter som presenteres for brukeren.
• Gi klare instruksjoner: Veiled brukerne om hvordan de kobler til og autoriserer enheten. Hvis enheten ikke vises, forklar for brukeren hvor de kan finne leverandør-ID og produkt-ID-er for vanlige enheter.
• Håndter feil elegant: Implementer robust feilhåndtering for å gi en jevn brukeropplevelse.
• Konsulter enhetsdokumentasjon: Se enhetens dokumentasjon for å forstå dens HID-rapportbeskrivelse.
• Test på flere plattformer: Test applikasjonen din på forskjellige nettlesere og operativsystemer for å sikre kompatibilitet.
• Vurder sikkerhet: Vær oppmerksom på sikkerhetsimplikasjoner når du jobber med brukerinndata. Rens data og unngå å utføre usikker kode.
• Tilby alternative løsninger: Hvis WebHID ikke støttes eller brukeren nekter tillatelse, tilby alternative inndatametoder.

Avanserte teknikker

Funksjonsrapporter (Feature Reports)

I tillegg til inndatarapporter, kan HID-enheter også sende og motta funksjonsrapporter. Funksjonsrapporter brukes til å konfigurere enheten eller hente dens status.

For å sende en funksjonsrapport, bruk device.sendFeatureReport()-metoden.

            const reportId = 0x01;
const data = new Uint8Array([0x01, 0x02, 0x03]); // Eksempeldata

device.sendFeatureReport(reportId, data)
  .then(() => {
    console.log('Funksjonsrapport sendt vellykket');
  })
  .catch((error) => {
    console.error('Kunne ikke sende funksjonsrapport:', error);
  });

            

              
                Copy
              
            
          

For å motta en funksjonsrapport, bruk device.getFeatureReport()-metoden.

            const reportId = 0x01;

device.getFeatureReport(reportId)
  .then((data) => {
    console.log('Mottok funksjonsrapport:', data);
  })
  .catch((error) => {
    console.error('Kunne ikke hente funksjonsrapport:', error);
  });

            

              
                Copy
              
            
          

Utgangsrapporter (Output Reports)

WebHID støtter også utgangsrapporter, som lar deg sende data *til* enheten. For eksempel kan du bruke utgangsrapporter til å kontrollere LED-lys eller andre aktuatorer på enheten.

For å sende en utgangsrapport, bruk device.sendReport()-metoden.

            const reportId = 0x01;
const data = new Uint8Array([0x01, 0x02, 0x03]); // Eksempeldata

device.sendReport(reportId, data)
  .then(() => {
    console.log('Utgangsrapport sendt vellykket');
  })
  .catch((error) => {
    console.error('Kunne ikke sende utgangsrapport:', error);
  });

            

              
                Copy
              
            
          

Sikkerhetshensyn

WebHID-tilgang krever brukertillatelse, noe som bidrar til å redusere noen sikkerhetsrisikoer. Det er imidlertid fortsatt viktig å være klar over potensielle sårbarheter.

• Datarensing: Rens alltid data mottatt fra HID-enheter for å forhindre kodeinjeksjon eller andre angrep.
• Opprinnelsesbegrensninger: WebHID er underlagt same-origin policy, som forhindrer tilgang til HID-enheter på tvers av opprinnelser.
• Brukerbevissthet: Informer brukere om risikoen ved å gi tilgang til HID-enheter og oppfordre dem til kun å gi tillatelse til klarerte nettsteder.

Globale perspektiver og eksempler

WebHID API-et har globale implikasjoner, og gjør det mulig for utviklere å lage webapplikasjoner som støtter et bredt spekter av enheter fra forskjellige produsenter og regioner. Vurder disse eksemplene:

• Spilling: Støtte for spillkontrollere fra ulike produsenter over hele verden (f.eks. Sony PlayStation-kontrollere, Microsoft Xbox-kontrollere, Nintendo Switch Pro Controller, og mindre kjente merker fra Asia og Europa).
• Tilgjengelighet: Lage tilpassede inndataenheter for brukere med nedsatt funksjonsevne, med hensyn til ulike regionale tilgjengelighetsstandarder og preferanser. For eksempel spesialiserte tastaturer eller brytergrensesnitt designet for spesifikke behov og tilgjengelig i forskjellige layouter.
• Industriell automasjon: Grensesnitt mot industrielle kontrollere og sensorer som brukes i produksjonsanlegg over hele verden, med støtte for forskjellige kommunikasjonsprotokoller og dataformater.
• Vitenskapelig forskning: Koble til vitenskapelige instrumenter som brukes i forskningslaboratorier globalt, slik at forskere kan samle inn og analysere data direkte i webapplikasjoner. Se for deg å kontrollere laboratorieutstyr ved et universitet i Tokyo fra en forskers bærbare datamaskin i London.
• Utdanning: Støtte for pedagogiske roboter og interaktive enheter som brukes i klasserom over hele verden, og gir studenter praktiske læringsopplevelser. Dette kan inkludere koderoboter produsert i Kina som brukes i et klasserom i Brasil.

WebHID vs. andre web-API-er

Det er verdt å merke seg hvordan WebHID kan sammenlignes med andre web-API-er relatert til enhetsinteraksjon:

• Gamepad API: Gamepad API-et gir et grensesnitt på høyere nivå spesifikt for spillkontrollere. WebHID tilbyr mer fleksibilitet og kontroll, men krever mer manuell håndtering av enhetsdata. Gamepad API-et er godt egnet for vanlige spillkontrollere, mens WebHID kan støtte mer eksotiske eller spesialiserte inndataenheter.
• WebUSB API: WebUSB lar webapplikasjoner kommunisere direkte med USB-enheter. WebHID er spesifikt designet for Human Interface Devices, mens WebUSB kan brukes for et bredere spekter av USB-enheter. WebUSB kan for eksempel brukes for et spesialisert vitenskapelig instrument koblet via USB, mens WebHID ville blitt brukt for et tilpasset tastatur eller en mus.
• Web Serial API: Web Serial muliggjør kommunikasjon over serielle porter. Dette er nyttig for å samhandle med innebygde systemer og andre enheter som kommuniserer over serielle tilkoblinger. En mikrokontroller som sender data over en seriell tilkobling kan bruke Web Serial, mens en spesialbygd styrespak ville brukt WebHID.

Fremtiden for WebHID

WebHID API-et er i kontinuerlig utvikling, med pågående arbeid for å forbedre sikkerheten, ytelsen og brukervennligheten. Etter hvert som flere enheter tar i bruk HID-standarden, vil WebHID bli et stadig viktigere verktøy for webutviklere. Forvent å se mer avanserte funksjoner og forbedret nettleserstøtte i fremtiden.

Konklusjon

WebHID er et kraftig API som åpner opp for et bredt spekter av muligheter for webapplikasjoner. Ved å forstå enhetsfiltre og hvordan man håndterer HID-rapporter, kan du skape engasjerende og interaktive webopplevelser som utnytter det fulle potensialet til Human Interface Devices. Enten du bygger et spill, et tilgjengelighetsverktøy eller et industrielt kontrollsystem, kan WebHID hjelpe deg med å koble webapplikasjonen din til den fysiske verden. Husk å prioritere brukeropplevelse, sikkerhet, og kompatibilitet på tvers av plattformer for å skape vellykkede og globalt tilgjengelige WebHID-applikasjoner.